<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>23_JS执行原理-事件循环的流程</title>
  <!-- 
  JavaScript 的执行原理中，事件循环（Event Loop）是一个核心概念，它决定了代码的执行顺序和异步任务的处理。以下是对事件循环流程的说明总结：
  1. 执行环境
  JavaScript 是单线程的，这意味着它在同一时间只能执行一个任务。为了处理异步操作，JavaScript 使用事件循环机制。

  2. 任务队列
  JavaScript 中的任务分为两类：
  - 宏任务（Macrotasks）：包括整体代码块、 `setTimeout` 、 `setInterval` 、I/O 操作等。
  - 微任务（Microtasks）：包括  `Promise`  的回调、 `MutationObserver`  等。

  3. 事件循环的基本流程
  事件循环的执行流程如下：
  1. 执行栈（Call Stack）：
    - JavaScript 开始执行代码，首先将全局代码放入执行栈中。
    - 当函数被调用时，它会被推入栈中，执行完成后从栈中弹出。

  2. 任务队列：
    - 当执行栈为空时，事件循环会检查任务队列。
    - 宏任务队列中会有待执行的宏任务，微任务队列中会有待执行的微任务。

  3. 执行宏任务：
    - 从宏任务队列中取出第一个宏任务并执行。

  4. 执行微任务：
    - 在宏任务执行完毕后，立即执行微任务队列中的所有微任务，直到微任务队列为空。

  5. 渲染：
    - 在微任务队列为空后，浏览器会进行 UI 渲染（如果需要的话）。

  6. 重复：
    - 循环回到第一步，继续执行下一个宏任务。

  4. 示例
  以下是一个简单的代码示例，展示事件循环的执行顺序：
  console.log('Start'); // 宏任务

  setTimeout(() => {
    console.log('Timeout'); // 宏任务
  }, 0);

  Promise.resolve().then(() => {
    console.log('Promise 1'); // 微任务
  }).then(() => {
    console.log('Promise 2'); // 微任务
  });

  console.log('End'); // 宏任务
   输出顺序：
  Start
  End
  Promise 1
  Promise 2
  Timeout
  5. 关键点
  - 微任务优先级高：在同一轮事件循环中，微任务会在宏任务之前执行。
  - 单线程：JavaScript 是单线程的，事件循环确保了异步操作的顺序执行。
  - UI 渲染：在微任务执行完后，浏览器会进行渲染，确保用户界面及时更新。

  总结
  事件循环是 JavaScript 中处理异步操作的核心机制。通过理解事件循环的流程，开发者可以更好地控制代码的执行顺序，优化性能和用户体验。掌握事件循环的工作原理对于处理复杂的异步编程至关重要。
  -->
</head>
<body>
  
</body>
</html>